<!--Reference from-->
<!--http://www.jq22.com/jquery-info13300-->
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>面签预约</title>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
    <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet">
    <link href="css/highlight.css" rel="stylesheet" type="text/css">
    <link href="css/main.css" rel="stylesheet" type="text/css">
    <link href="css/my.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        .my-form-h1 {}

        .my-form-label {
            font-size: 16px;
            font-weight: normal;
            color: #040404;
        }

    </style>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
    <script src="js/jweixin-1.2.0.js"></script>
    <script src="https://cdn.bootcss.com/json2/20160511/json2.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.18.0/moment.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.18.0/locale/zh-cn.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    <script src="js/highlight.js"></script>
    <script src="js/bootstrap-switch.js"></script>
    <script src="js/main.js"></script>
    <script type="text/javascript" src="js/my.js"></script>
    <script type="text/javascript">
        var investorAry = [];
        var isAddMode = true;

        function getmeetingdata() {
            var theid = GetRequest()["id"];
            var myapi = restapis;
            myapi.request("serchMQ", null, "id=" + theid, function(result) {
                if (result)
                    pressData(result);
            }, function(e) {});
        }

        function addAinvestorToList(data) {
            var rsstr = '<a href="javascript:editInvestor(' +
                data["order"] + ')" class="list-group-item my-list-item-42"><div class="col-xs-4">' +
                data["qygd_name"] +
                '</div><div class="col-xs-4">' +
                data["qygd_jobtitle"] +
                '</div><div class="col-xs-4">' + data["qygd_investment"] + "万元 "
            calculate_qygd_investment(data["qygd_investment"]) +
                '</div></a>';
            $("#investorlists").append(rsstr);
            investorAry.push(data);
        }

        function calculate_qygd_investment(investment) {
            var totalInvestment = Number($("#register_money").val());
            if (Number(investment)) {
                var rsstr = Math.floor(investment / totalInvestment * 10000) / 100;
                return rsstr + "%";
            }
            return "0%";
        }

        function pressData(data) {
            if (data.hasOwnProperty("apply_name")) $("#companyname").text(data.apply_name);
            if (data.hasOwnProperty("actual_address")) $("#actual_address").text(data.actual_address);
            if (data.hasOwnProperty("manage_range")) $("#manage_range").text(data.manage_range);
            if (data.hasOwnProperty("register_money")) $("#register_money").val(data.register_money);
            if (data.hasOwnProperty("register_kind")) $("#register_kind").text(data.register_kind);
            if (data.hasOwnProperty("appointment_time")) $("#appointment_time").val(data.appointment_time);
            if (data.hasOwnProperty("tzfr_name")) $("#tzfr_name").val(data.tzfr_name);
            for (var i = 0; i < data.arr.length; i++) {
                data.arr[i]["order"] = i;
                addAinvestorToList(data.arr[i]);
            }
            if (data.hasOwnProperty("appointment_time")) {
                var theyear = Math.round(data.appointment_time.split("年")[0]);
                var datastr = data.appointment_time.split("年")[1];
                var themonth = Math.round(datastr.split("月")[0]) - 1;
                datastr = datastr.split("月")[1];
                var theday = Math.round(datastr.split("日")[0]);
                var today = new Date(theyear, themonth, theday);
                today.setFullYear(theyear);
                today.setMonth(themonth);
                today.setDate(theday);
                $('#appointment_time_picker').datetimepicker({
                    locale: 'zh-cn',
                    defaultDate: today,
                    enabledDates: [today]
                });
            }
            if (data.hasOwnProperty("appointment_address"))
                $("#appointment_address").val(data.appointment_address);
            if(data.hasOwnProperty("arr")){
                for(var i=0;i<data.arr.length;i++){
                    var node = data.arr[i];
                    addAinvestorToList(node);
                }
            }
        }
        //
        function previewImgWithName(picname, theimg) {
            var imgpath = "";
            var node = investorAry[curSelectedIndex]
            wx.previewImage({
                current: getRemotePic(node[picname]), // 当前显示图片的http链接
                urls: [getRemotePic(node[picname])] // 需要预览的图片http链接列表
            });
        }
        var curSelectedIndex = -1;

        function editInvestor(index) {
            if (investorAry.length > index) {
                var investor = investorAry[index];
                $("#qygd_name").val(investor["qygd_name"]);
                $("#qygd_idnumber").val(investor["qygd_idnumber"]);
                $("#qygd_investment").val(investor["qygd_investment"]);
                $("#qygd_jobtitle").val(investor["qygd_jobtitle"]);
                $("#qygd_pic1" + "_img").attr("src", getRemotePic(investor["qygd_pic1"]));
                $("#qygd_pic2" + "_img").attr("src", getRemotePic(investor["qygd_pic2"]));
                $("#qygd_pic3" + "_img").attr("src", getRemotePic(investor["qygd_pic3"]));
                //这里需要服务器上图片显示的方法
                isAddMode = false;
                $("#addinvestorpanel").modal("toggle");
            }
            curSelectedIndex = index;
        }
        function encodeDatas() {
            var mywx = myweixin;

            var rsobj = {};
            rsobj["id"] = GetRequest()["id"];
            rsobj["wx_openid"] = mywx.openid;
            rsobj["appointment_state"] = 1;
            var theyear = parseInt($("#appointment_time").val().split("年")[0]);
            var thelast = $("#appointment_time").val().split("年")[1];
            var themonth = parseInt(thelast.split("月")[0]);
            thelast = thelast.split("月")[1];
            var theday = parseInt(thelast.split("日")[0]);
            thelast = thelast.split("日")[1];
            var thehour = parseInt(thelast.split("：")[0]);
            var them = parseInt(thelast.split(":")[1]);
            var thedate = new Date();
            thedate.setFullYear(theyear);
            thedate.setMonth(themonth);
            thedate.setDate(theday);
            thedate.setHours(thehour);
            thedate.setMinutes(them);
            rsobj["appointment_time"] = thedate.getTime() / 1000;
            rsobj["appointment_address"] = $("#appointment_address").val();
            rsobj["zip_code"] = $("#zip_code").val();
            rsobj["weituo_state"] = $("#weituo_state").val();
            rsobj["qyfr_name"] = $("#qyfr_name").val();
            rsobj["qyfr_telephone"] = $("#qyfr_telephone").val();
            rsobj["qyfr_mobile"] = $("#qyfr_mobile").val();
            rsobj["qyfr_email"] = $("#qyfr_email").val();
            rsobj["qycw_name"] = $("#qycw_name").val();
            rsobj["qycw_telephone"] = $("#qycw_telephone").val();
            rsobj["qycw_mobile"] = $("#qycw_mobile").val();
            rsobj["qycw_email"] = $("#qycw_email").val();
            rsobj["qycw_pic1"] = $("#qycw_pic1").val();
            rsobj["qycw_pic2"] = $("#qycw_pic2").val();
            rsobj["qyjs_name"] = $("#qyjs_name").val();
            rsobj["qyjs_idnumber"] = $("#qyjs_idnumber").val();
            rsobj["qyjs_pic1"] = $("#qyjs_pic1").val();
            rsobj["qyjs_pic2"] = $("#qyjs_pic2").val();

            return rsobj;
        }
        $(document).ready(function() {
            $("#thesubmit").on("click", function(events) {
                var jdata = encodeDatas();
                var myapi = restapis;
                myapi.request("updateMQ.do", "page", jdata, function(result) {
                    if (result.result == 0) {
                        window.location = "ee_progress.html?id=" + GetRequest()["id"];
                    }
                }, function(e) {
                    alert("提交错误,请检查参数")
                }, "POST");
            });

            //是否代理记账
            $('#weituo_state').on('switchChange.bootstrapSwitch', function(e, data) {
                var $el = e,
                    value = data;
                if (value) {
                    $("#aainfogroup").addClass("hidden");
                } else {
                    $("#aainfogroup").removeClass("hidden");
                }

                console.log(e, $el, value);
            });
            getmeetingdata();
            var mywx = myweixin;
            mywx.initial();
        })

    </script>
</head>

<body class="my-body">

    <div style="padding:0px;marging:0px;background-size: cover;overflow-y:visible;">
        <img class="col-xs-4 col-xs-offset-4 img-responsive my-gap-top" src="images/dfa8c6ef0acedc844c59669f4f24fe1a.png">
        <div class="section my-topsection">
            <div class="container" style="vertical-align:mid;">
                <div class="col-xs-12 text-center my-gap-bottom">
                    <!--h3> 企业名称预先核准申请书</h3-->
                </div>
            </div>
            <div class="container">
                <div class="form-group">
                    <label class="clearfix">登记企业名称</label>
                    <label id="companyname" class="my-form-label text-center clearfix">&nbsp;
                    </label>
                </div>
                <div class="form-group">
                    <label class="clearfix">实际经营地址</label>
                    <div id="actual_address" class="my-form-label text-left clearfix">&nbsp;
                    </div>
                </div>
                <div class="form-group">
                    <label class="clearfix">企业经营范围</label>
                    <div id="manage_range" class="my-form-label text-left clearfix">&nbsp;
                    </div>
                </div>
                <div class="form-group">
                    <label>企业注册资本：</label>
                    <input id="register_money" class="form-control" disabled>
                </div>
                <div class="form-group">
                    <label>企业注册类型：</label>
                    <label id="register_kind" class="my-form-label text-left clearfix">&nbsp;
                    </label>
                </div>
                <form id="bookform">
                    <div class="form-group">
                        <label class="clearfix">面签预约时间</label>
                        <div class="form-group">
                            <div class='input-group date' id='appointment_time_picker'>
                                <input id="appointment_time" type='text' class="form-control" name="appointment_time" />
                                <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="clearfix">面签预约地点</label>
                        <select id="appointment_address" name="appointment_address" class="selectpicker mycompany-select">
                        <option title="小区总部" value="小区总部"><span style="font-size:12;color:#cccccc">园区小区总部，地址是：上海市XX区XX路233号</span></option>
                        <option title="市区总部" value="市区总部"><span style="font-size:12;color:#cccccc">园区市区总部，地址是：上海市XX区XX路233号</span></option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="zip_code">区域邮政编码</label>
                        <input id="zip_code" name="zip_code" class="form-control" type="number" maxlength="6">
                    </div>
                    <div class="form-group">
                        <label for="qycw_name">企业法人姓名</label>
                        <input id="qyfr_name" name="qycw_name" class="form-control" type="text">
                    </div>
                    <div class="form-group">
                        <label for="qycw_telephone">企业法人电话</label>
                        <input id="qyfr_telephone" name="qycw_telephone" class="form-control" type="tel">
                    </div>
                    <div class="form-group">
                        <label for="qycw_mobile">企业法人手机</label>
                        <input id="qyfr_mobile" name="qycw_mobile" class="form-control" type="tel">
                    </div>
                    <div class="form-group">
                        <label for="qycw_email">企业法人邮箱</label>
                        <input id="qyfr_email" name="qycw_email" class="form-control" type="email">
                    </div>
                    <div class="form-group text-left">
                        <label class="col-xs-7">我想委托代理记账</label>
                        <div class="input-group col-xs-5 text-right">
                            <div class="switch">
                                <input id="weituo_state" name="weituo_state" type="checkbox" data-on-text="是" data-off-text="不" checked />
                            </div>
                        </div>
                    </div>
                    <div id="aainfogroup" class="hidden">
                        <div class="form-group">
                            <label for="qycw_name">财务姓名</label>
                            <input id="qycw_name" name="qycw_name" class="form-control" type="text">
                        </div>
                        <div class="form-group">
                            <label for="qycw_telephone">财务电话</label>
                            <input id="qycw_telephone" name="qycw_telephone" class="form-control" type="tel">
                        </div>
                        <div class="form-group">
                            <label for="qycw_mobile">财务手机</label>
                            <input id="qycw_mobile" name="qycw_mobile" class="form-control" type="tel">
                        </div>
                        <div class="form-group">
                            <label for="qycw_email">财务邮箱</label>
                            <input id="qycw_email" name="qycw_email" class="form-control" type="email">
                        </div>
                        <div class="row">
                            <a class="col-xs-4" href="javascript:uploadImgWithName('#qycw_pic1','#qycw_pic1_img')" style="border:0px solid #000">
                                <img id="qycw_pic1_img" src="images/picframe.svg" width="100" height="100" class="img-responsive my-picbackground my-gap-right" style="border-radius: 8px;background-color: #E5E5E4;border: 1px solid #d3d3d3;">
                            </a>
                            <a class="col-xs-4" href="javascript:uploadImgWithName('#qycw_pic2','#qycw_pic2_img')" style="border:0px solid #000">
                                <img id="qycw_pic2_img" src="images/picframe.svg" width="100" height="100" class="img-responsive my-picbackground my-gap-right" style="border-radius: 8px;background-color: #E5E5E4;border: 1px solid #d3d3d3;">
                            </a>
                        </div>
                        <div class="row">
                            <label class="col-xs-4" style="font-size:14px;font-weight:normal">正面</label>
                            <label class="col-xs-4" style="font-size:14px;font-weight:normal">反面</label>
                        </div>
                        <input type="hidden" id="qycw_pic1">
                        <input type="hidden" id="qycw_pic2">
                    </div>
                    <hr>
                    <hr>
                    <label class="my-gap-bottom">投资人信息</label>
                    <div class="row">
                        <div class="col-xs-4" style="font-size:14px;">名称</div>
                        <div class="col-xs-4" style="font-size:14px;">职务</div>
                        <div class="col-xs-4" style="font-size:14px;">金额</div>

                    </div>
                    <div id="investorlists" class="list-group my-list" style="padding-left:0px;padding-right:0px;marging-left:0px;marging-right:0px;">
                    </div>
                    <hr class="my-gap-top">
                    <div class="form-group">
                        <label for="qyjs_name">企业监事姓名</label>
                        <input id="qyjs_name" name="qyjs_name" type="text" required>
                    </div>
                    <div class="form-group">
                        <label for="qyjs_idnumber">监事证件号码</label>
                        <input id="qyjs_idnumber" name="qyjs_idnumber" type="tel" required>
                    </div>
                    <div class="row">
                        <a class="col-xs-4" href="javascript:uploadImgWithName('#qyjs_pic1','#qyjs_pic1_img')" style="border:0px solid #000">
                            <img id="qyjs_pic1_img" src="images/picframe.svg" width="100" height="100" class="img-responsive my-picbackground my-gap-right" style="border-radius: 8px;background-color: #E5E5E4;border: 1px solid #d3d3d3;">
                        </a>
                        <a class="col-xs-4" href="javascript:uploadImgWithName('#qyjs_pic2','#qyjs_pic2_img')" style="border:0px solid #000">
                            <img id="qyjs_pic2_img" src="images/picframe.svg" width="100" height="100" class="img-responsive my-picbackground my-gap-right" style="border-radius: 8px;background-color: #E5E5E4;border: 1px solid #d3d3d3;">
                        </a>
                    </div>
                    <div class="row">
                        <label class="col-xs-4" style="font-size:14px;font-weight:normal">正面</label>
                        <label class="col-xs-4" style="font-size:14px;font-weight:normal">反面</label>
                    </div>
                    <input type="hidden" id="qyjs_pic1">
                    <input type="hidden" id="qyjs_pic2">
                    <button id="thesubmit" class="btn btn-primary form-control" type="button">提交</button>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="addinvestorpanel">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                        <span class="sr-only"></span>
                    </button>
                    <h4 id="mysetTitle">投资人</h4>

                </div>
                <div class="modal-body">
                    <form class="my-form" role="form">
                        <div class="form-group my-form-group">
                            <label for="qygd_name">名称或姓名</label>
                            <input type="text" name="qygd_name" class="form-control my-input" id="qygd_name" disabled>
                        </div>
                        <div class="form-group my-form-group my-gap-bottom" style="font-size:18px;">
                            <span>职务</span>
                            <input type="text" disabled id="qygd_jobtitle" name="qygd_jobtitle" class="col-xs-5 form-control">
                        </div>
                        <div class="form-group my-form-group">
                            <label for="qygd_idnumber">证件号</label>
                            <input type="text" name="qygd_idnumber" class="form-control my-input" id="qygd_idnumber" disabled>
                        </div>

                        <div class="form-group my-form-group">
                            <label for="qygd_investment">投资金额</label>
                            <input id="qygd_investment" type="number" name="qygd_investment" class="form-control my-input" disabled>
                            <span>万元</span>
                        </div>
                        <label>投资人身份证</label>
                        <div class="container-fluid">
                            <div class="row">
                                <a class="col-xs-4" href="javascript:previewImgWithName('#qygd_pic1','#qygd_pic1_img')" style="border:0px solid #000">
                                    <img id="qygd_pic1_img" src="images/picframe.svg" width="100" height="100" class="img-responsive my-picbackground my-gap-right" style="border-radius: 8px;background-color: #E5E5E4;border: 1px solid #d3d3d3;">
                                </a>
                                <a class="col-xs-4" href="javascript:previewImgWithName('#qygd_pic2','#qygd_pic2_img')" style="border:0px solid #000">
                                    <img id="qygd_pic2_img" src="images/picframe.svg" width="100" height="100" class="img-responsive my-picbackground my-gap-right" style="border-radius: 8px;background-color: #E5E5E4;border: 1px solid #d3d3d3;">
                                </a>
                                <a class="col-xs-4" href="javascript:previewImgWithName('#qygd_pic3','#qygd_pic3_img')" style="border:0px solid #000">
                                    <img id="qygd_pic3_img" src="images/picframe.svg" width="100" height="100" class="img-responsive my-picbackground my-gap-right" style="border-radius: 8px;background-color: #E5E5E4;border: 1px solid #d3d3d3;">
                                </a>
                            </div>
                            <div class="row">
                                <label class="col-xs-4" style="font-size:14px;font-weight:normal">正面</label>
                                <label class="col-xs-4" style="font-size:14px;font-weight:normal">反面</label>
                                <label class="col-xs-4" style="font-size:14px;font-weight:normal">证件照</label>
                            </div>
                        </div>
                        <input type="hidden" id="qygd_pic1">
                        <input type="hidden" id="qygd_pic2">
                        <input type="hidden" id="qygd_pic3">
                        <div class="container">
                            <a data-dismiss="modal" class="btn btn-success col-xs-12 my-gap-top" style="font-size:22px;padding:5px;">确定</a>
                        </div>

                    </form>
                </div>

            </div>
        </div>
    </div>

</body>

</html>
